<template>
    <div>
        <div id="mountNode"></div>
    </div>
</template>
<script>
    import G6 from '@antv/g6';

    export default {
        mounted() {
            /*
  * Tamplate has default install the newest G6 && G6Plugins as
  * https://unpkg.com/@antv/g6/build/g6.js
  * https://unpkg.com/@antv/g6/build/plugins.js
  * if you can not access this url above you can install By you own
  */

            /*
             * 模版已经默认按以下链接安装了最新版 G6 和 G6Plugins
             * https://unpkg.com/@antv/g6/build/g6.js
             * https://unpkg.com/@antv/g6/build/plugins.js
             * 如果你无法访问上述链接，你需要自己手动安装能访问的链接安装 G6
             */
            const data = {
                nodes: [{
                    id: 'node1',
                    x: 100,
                    y: 200
                }, {
                    id: 'node2',
                    x: 300,
                    y: 200
                }],
                edges: [{
                    target: 'node2',
                    source: 'node1'
                }]
            };

            G6.registerNode('customNode', {
                draw(item){
                    const group = item.getGraphicGroup();
                    const html = G6.Util.createDOM('<div class="node">HTML 节点</div>');
                    return group.addShape('dom', {
                        attrs: {
                            x: 0,
                            y: 0,
                            width: 100,
                            height: 24,
                            html
                        }
                    });
                }
            });

            const graph = new G6.Graph({
                container: 'mountNode',  // 容器ID
                fitView: 'cc',
                renderer: 'svg',
                height: window.innerHeight
            });
            graph.node({
                shape: 'customNode'
            });
            graph.read(data);
        }
    }
</script>